<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 最外层的盒子
			 计算盒子的真实的宽度 = 盒子本身的宽度 + 内边距左右的宽度 + 边框左右的宽度
			 502 + 10 + 2 = 514px
			 * * */
			.login{
				width: 490px;
				height: 290px;
				margin: 50px auto;
				border: 1px solid black;
				padding: 5px;
			}
			/*
			 设置标题
			 * */
			.login .login-title{
				background: #90EE90;
				height: 40px;
				width: 490px;
				/*
				 距离下边有40个像素
				 * */
				margin-bottom: 40px;
			}
			/*
			 文字标签
			 * */
			.login .login-title h3{
				margin: 0px;
				/*
				 居中显示
				 * */
				line-height: 40px;
				/*
				 元素距离元素之间的间隙
				 * */
				padding-left: 5px;
			}
			.login div label{
				width: 100px;
				
				/*
				 设置成行内块标签，因为需要设置label标签的宽度和高度
				 * */
				display: inline-block;
				text-align: right;
			}
			.login div input{
				width: 238px;
				height: 26px;
				/*
				 注意：如果在设置input标签的时候，系统会默认给我们添加边框和内边距，所以需要重新设置
				 * */
				border: 1px solid black;
				padding: 0px;
				/*
				 距离下边有30个像素
				 * */
				margin-bottom: 30px;
			}
			.login .btn input{
				width: 100px;
				height: 30px;
				
			}
		</style>
	</head>
	<body>
		<!--
			表示最外层的盒子
		-->
		<div class="login">
			<!--
				表示登录框上面的标题
			-->
			<div class="login-title">
				<h3>用户登录</h3>
			</div>
			<!--
				登录提交的表单
				只要是提交到服务器的代码，都必须写到form表单里面
			-->
			<form>
				<!--
					用户名的文本输入框
				-->
				<div>
					<label>用户名：</label><input type="text"  />
				</div>
				
				<div>
					<!--
						密码输入框
					-->
					<label>密码：</label><input type="password"  />
				</div>
				<!--
					提交和重置按钮
				-->
				<div class="btn">
					<label></label><input type="submit" value="提交" />
					<input type="reset" value="重置" />
				</div>
			</form>
			
		</div>
	</body>
</html>
